import React, { useEffect, useState } from 'react';
import { StyleSheet, TouchableOpacity } from 'react-native';
import { NavigationProp, RouteProp } from '@react-navigation/native';
import { useReactive } from 'ahooks';
import CustomFlatList from '../../../component/CustomFlatList.tsx';
import { View, Text } from 'native-base';
import NewsRequest from '../../../request/newsRequest.ts';
import { Loading } from '../../../component/LoadingOverlay.tsx';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import { ENewsType } from '../../../common/enum.ts';
import { Badge } from '@rneui/base';

interface INewsScreenProps {
  navigation: NavigationProp<any, 'news'>;
  route: RouteProp<{ news: any }, 'news'>;
}
interface IState {
  isLoading: boolean;
  pageNo: number;
  totalPage: number;
  refreshing: boolean;
  data: INewsListListIsList[];
  reset: () => void;
}
const NewsScreen: React.FC<INewsScreenProps> = ({ navigation, route }) => {
  const state = useReactive<IState>({
    pageNo: 1,
    totalPage: 2,
    isLoading: false,
    refreshing: false,
    data: [],
    reset() {
      this.pageNo = 1;
      this.totalPage = 2;
      this.data = [];
    },
  });

  useEffect(() => {
    fetchNewsList();
  }, []);

  /**
   * 获取消息列表
   */
  const fetchNewsList = () => {
    const { pageNo, totalPage } = state;
    Loading.show('加载中');
    if (pageNo <= totalPage) {
      state.isLoading = true;
      NewsRequest.NewsList({ pageNo, pageSize: 20 })
        .then((res) => {
          Loading.hide();
          state.data = [...state.data, ...res.data.list];
          state.totalPage = res.data.totalPage;
          state.pageNo += 1;
          state.isLoading = false;
          state.refreshing = false;
        })
        .catch(() => {
          state.isLoading = false;
          state.refreshing = false;
          Loading.hide();
        });
    } else {
      Loading.hide();
    }
  };

  /**
   * 列表刷新
   */
  const customListRefresh = () => {
    state.refreshing = true;
    state.reset();
  };

  /**
   * 点击列表
   * @param index
   */
  const handleGotoNewsDetails = (index: number) => {
    state.data[index] = { ...state.data[index], isRead: 1 };
  };

  const renderItem = (item: INewsListListIsList, index: number) => {
    return (
      <TouchableOpacity style={[styles.card, { marginTop: index === 0 ? 16 : 0 }]} onPress={() => handleGotoNewsDetails(index)}>
        <View flexDirection={'row'} justifyContent={'space-between'}>
          <View flexDirection={'row'} alignItems={'center'}>
            <MaterialCommunityIcons name="message-processing-outline" size={18} color={'#1192ee'} />
            <Text marginLeft={2} color={'#1192ee'}>
              {ENewsType[item.remindType]}
            </Text>
          </View>
          <Text fontSize={11} color={'#999999'}>
            {item.createDate}
          </Text>
        </View>
        <Text marginTop={2}>{item.remindContent}</Text>
        <Badge
          status="error"
          badgeStyle={{
            transform: [{ scale: !item.isRead ? 1.7 : 0 }],
          }}
          containerStyle={{ position: 'absolute', top: -2, right: 2 }}
        />
      </TouchableOpacity>
    );
  };
  return <CustomFlatList data={state.data} style={{ paddingHorizontal: 16 }} renderItem={({ item, index }) => renderItem(item, index)} refreshing={state.refreshing} isLoading={state.isLoading} onEndReached={fetchNewsList} onRefresh={customListRefresh} />;
};
const styles = StyleSheet.create({
  card: { borderRadius: 8, marginBottom: 16, padding: 12, backgroundColor: '#ffffff' },
});

export default NewsScreen;
